<template>

  <div id="app" style="width: 50%;margin: auto;padding-top: 10px">

    <el-card shadow="always" style="text-align: center">
      <p style="padding-top:10px;font-size: 28px;font-weight:bold"><i class="el-icon-edit"/> 任务进度</p>
      <div v-if="sendTaskUserId===this.$store.state.userId">
        <el-button type="success" plain @click="applicationSettlement()"><i class="el-icon-success"></i> 申请结算
        </el-button>
        <el-button type="danger" plain @click="applyRefund()"><i class="el-icon-error"></i> 申请退款</el-button>
      </div>
      <div v-if="receiveTaskUserId===this.$store.state.userId">
        <el-button type="primary" plain @click="dialogVisible = true"><i class="el-icon-s-claim"></i> 提交进度</el-button>
      </div>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-timeline>
        <el-timeline-item v-for="(schedule,index) in scheduleList" :key="index"
                          :timestamp="schedule.createTime" placement="top">
          <el-card>
            <h3>{{ schedule.subTask }}</h3>
            <p> {{ schedule.nickName }} 提交于 {{ schedule.createTime }}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </el-card>

    <el-dialog
        title="上传项目进度日报"
        :visible.sync="dialogVisible"
        width="48%">
      <p>当前时间为：{{ this.getNowTime() }}</p>
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请简述当日工作进度。"
          v-model="subTask">
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pushSchedule()">确 定</el-button>
      </span>
    </el-dialog>

    <div v-if="scheduleList.length<2" style="width: 100%;height: 250px"></div>

  </div>

</template>

<script>
import Vue from 'vue'
export default {
  name: "taskProgress",
  data() {
    return {
      taskId: '',
      sendTaskUserId: '',
      receiveTaskUserId: '',
      scheduleList: [],

      dialogVisible: false,

      subTask: '',

    }
  },
  methods: {
    async getTask() {
      const {data: res} = await this.$http.get('/order/identity/' + this.taskId)
      this.sendTaskUserId = res.content.sendTaskUserId
      this.receiveTaskUserId = res.content.receiveTaskUserId
    },
    async getSchedule() {
      const {data: res} = await this.$http.get('/progressTask/taskProgresses/' + this.taskId)
      this.scheduleList = res.content
    },

    async pushSchedule() {
      if (this.subTask !== '') {
        this.dialogVisible = false
        const {data: res} = await this.$http.post('/progressTask/taskProgress', {
          taskId: this.taskId,
          subTask: this.subTask
        })
        this.subTask = ''
        if (res.code === "201") {
          Vue.prototype.$notify.success({
            title: "成功",
            message: "提交成功"
          });
          await this.getSchedule()
        } else {
          Vue.prototype.$notify.error({
            title: "失败",
            message: "提交失败"
          })
        }
      } else {
        Vue.prototype.$notify.error({
          title: "错误",
          message: "输入不能为空"
        })
      }
    },

    async applicationSettlement() {
      const {data: res} = await this.$http.put("/order/settlement", {taskId: this.taskId})
      if (res.code === "200") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "申请成功"
        })
        await this.$router.push('/userLoginMain/personCenter/pCMyWork')
      } else {
        Vue.prototype.$notify.error({
          title: "失败",
          message: "申请失败"
        })
      }
    },

    async applyRefund() {
      const {data: res} = await this.$http.put("/order/refund", {taskId: this.taskId})
      if (res.code === "200") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "申请成功"
        })
        await this.$router.push('/userLoginMain/personCenter/pCMyWork')
      } else {
        Vue.prototype.$notify.error({
          title: "失败",
          message: "申请失败"
        })
      }
    },
    getNowTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let min = date.getMinutes();
      let seconds = date.getSeconds();
      return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + seconds;
    }
  },
  mounted() {
    this.taskId = this.$route.query.taskId
    this.getTask()
    this.getSchedule()
  }
}
</script>

<style scoped>

</style>